<style>
    .icon-button {
        width: 40px;
        height: 40px;
        color: #fff;
        font-size: 18px;
        margin: 10px;
    }

    .icon-frame {
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
    }

    .layui-form-label::before {
        content: '';
        width: 0;
        height: 26px;
        border-left: 3px solid #1296db;
        position: absolute;
        left: 0;
        top: 6px;
    }

    .layui-form-label {
        text-align: left !important;
        width: auto;
    }

    ._dc_style_editor_ {
        width: 500px;
    }

    @media screen and (max-width: 800px) {
        ._dc_style_editor_ {
            width: 100%;
        }
    }

    #css-preview {
        font: a;
        line-height: 22px;
        color: #000;
        text-align: -webkit-auto;
    }

    p {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .layui-collapse {
        border-width: 2px
    }

    .layui-colorpicker {
        border: none;
    }
</style>
<div id="_dc_style_editor_body_" style="overflow:hidden;box-shadow: #ddd 10px 10px 25px;">
    <div id="_dc_style_editor_tool_bar_area_" style="width: 100%;height: 44px;background-color: #1296db;">
        <div id="texttools" style="float: left;margin-top:12px;width: 260px;height: auto;">
            <div style="float: left;">
                <i class="icon-button layui-icon layui-icon-fonts-strong"></i>
                <i class="icon-button layui-icon layui-icon-align-center"></i>
                <i class="icon-button layui-icon layui-icon-align-left"></i>
                <i class="icon-button layui-icon layui-icon-align-right"></i>
                <i class="icon-button layui-icon layui-icon-fonts-u"></i>
                <i class="icon-button layui-icon layui-icon-fonts-i"></i>
            </div>
        </div>
        <div id="function_area" style="float: right;margin-top: -22px;height: 44px">
            <div style="float: right;margin-top: 22px;">
                <button style="background:none;margin: 0px;border: none;font-size: 20px;width: 20px;"
                    class="icon-button layui-icon layui-icon-up"></button>
                <button style="background:none;margin: 0px;border: none;font-size: 20px;width: 56px;"
                    class="icon-button layui-icon layui-icon-down"></button>
                <button style="background:none;margin: 0px;border: none;font-size: 20px;width: 20px;margin-right: 10px;"
                    class="icon-button layui-icon layui-icon-close"></button>
            </div>
        </div>
    </div>
    <div id="_dc_style_editor_config_area_" style="overflow:scroll;width:100%;height:100%;background-color:#fff;">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-collapse" lay-filter="_dc_style_editor_history_">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">推荐</h2>
                        <div class="layui-colla-content layui-show" style="padding: 10px;">
                            <p id="font-size"></p>
                        </div>
                    </div>
                </div>
                <div class="layui-collapse" lay-filter="_dc_style_editor_font_config_">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">文字</h2>
                        <div class="layui-colla-content layui-show" style="padding: 10px;">
                            <p id="font-size"></p>
                            <p id="color"></p>
                            <p id="font-family"></p>
                            <p id="font-style"></p>
                            <p id="text-align"></p>
                            <p id="line-height"></p>
                            <p id="font-weight"></p>
                            <div class="layui-collapse" lay-filter="font">
                                <div class="layui-colla-item" lay-filter="style_config_font">
                                    <h2 class="layui-colla-title">字体<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px;">
                                        <p id="font-variant"></p>
                                        <p id="text-decoration"></p>
                                        <p id="text-transform"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-collapse" lay-filter="p">
                                <div class="layui-colla-item" lay-filter="style_config_font">
                                    <h2 class="layui-colla-title">段落<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px">
                                        <p id="letter-spacing"></p>
                                        <p id="text-indent"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-collapse" lay-filter="_dc_style_editor_normal_config_">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">通用</h2>
                        <div id="_dc_style_editor_normal_config_" class="layui-colla-content" style="padding: 10px;">
                            <div class="layui-colla-item" lay-filter="style_config_font">
                                <p id="width"></p>
                                <p id="height"></p>
                                <p id="box-margin-left"></p>
                                <p id="box-margin-top"></p>
                                <p id="box-margin-bottom"></p>
                            </div>
                            <div class="layui-collapse" lay-filter="border">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">边框<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px">
                                        <p id="border-style"></p>
                                        <p id="border-width"></p>
                                        <p id="border-color"></p>
                                        <p id="border-left"></p>
                                        <p id="border-right"></p>
                                        <p id="border-top"></p>
                                        <p id="border-bottom"></p>
                                        <p id="border-radius"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-collapse" lay-filter="padding">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">边距<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px">
                                        <p id="padding"></p>
                                        <p id="margin"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-collapse" lay-filter="background">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">背景<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px">
                                        <p>
                                            <label id="background-image_title_label" class="layui-form-label">背景图片 /
                                                background-image : </label>
                                            <div style="text-align: right;margin-right: 10px;">
                                                <input type="text" class="layui-input" name="background-image">
                                                <button class="layui-btn layui-btn-primary" style="margin-top: 10px;"
                                                    onclick="changeBgImage();">确定</button>
                                            </div>
                                        </p>
                                        <p id="background-color"><a href="#"></a></p>
                                        <p id="background-repeat"><a href="#"></a></p>
                                        <p id="background-position"><a href="#"></a></p>
                                        <p id="background-attachment"><a href="#"></a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-collapse" lay-filter="position">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">定位<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px">
                                        <p id="position"></p>
                                        <p id="position-top"></p>
                                        <p id="position-bottom"></p>
                                        <p id="position-left"></p>
                                        <p id="position-right"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-collapse" lay-filter="other">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">其它<i class="layui-icon layui-colla-icon"></i>
                                    </h2>
                                    <div class="layui-colla-content" style="padding: 0px 0px 0px 10px">
                                        <p id="cursor"></p>
                                        <p id="visibility"></p>
                                        <p id="overflow"></p>
                                        <p id="float"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-collapse" lay-filter="_dc_style_editor_style_config_">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">CSS</h2>
                        <div class="layui-colla-content layui-show" style="padding: 10px">
                            <pre id="css" style="width: 100%;height: 300px;">

                    </pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['element', 'form', "table", "layer", "colorpicker"], function () {
        form = layui.form;
        table = layui.table;
        element = layui.element;
        colorpicker = layui.colorpicker;
        form.render();
        table.render();
        element.render();
        var target;
        var _dc_style_editor_target_origin_style_;
        var container = $("#_dc_style_editor_body_");
        var _dc_style_editor_cb_;
        layui.element.render();

        function setStyleEditorTargetByID(id, type, cb) {
            _dc_style_editor_cb_ = cb;
            target = $('#' + id);
            _dc_style_editor_target_origin_style_ = target.attr("style");
            // 获取最新的style并显示
            if (target.attr('style')) {
                $('#css').html(target.attr('style').replace(/; /g, ';\n'));
            }

            //文本型，则显示文本相关
            if (type == "text") {
                $('#texttools').show();
                $('div[lay-filter="_dc_style_editor_font_config_"]').show();
            }
            // 隐藏文本相关
            else {
                $('div[lay-filter="_dc_style_editor_font_config_"]').hide();
                $('#texttools').hide();
                $('#_dc_style_editor_normal_config_').addClass('layui-show');
            }
        }

        add_deg = 0;
        sub_deg = 0;

        // function getStyle() {
        //     if (target.attr('style')) {
        //         var htmlstyle = target.attr('style').replace(/;/g, ';<br>  ');
        //         $('#css').html("{<br>   " + htmlstyle + "<br>}");
        //     }
        // }
        // setInterval(() => {
        //     getStyle();
        // }, 2000);

        // 需特殊处理的函数
        {
            // 处理盒子模式下的位置
            function handleBoxMargin(id, input) {
                if (input.val() == "center") {
                    input.val("");
                    setTargetCss("margin", "0 auto");
                } else {
                    array = target.css("margin").split(" ");
                    switch (id) {
                        case "box-margin-left":
                            switch (array.length) {
                                case 1:
                                    setTargetCss("margin", `0px ${input.val()} 0px`);
                                    break;
                                case 2:
                                    setTargetCss("margin", `${array[0]} ${input.val()}`);
                                    break;
                                default:
                                    setTargetCss("margin", `${array[0]} ${input.val()} ${array[2]}`);
                                    break;
                            }
                            break;
                        case "box-margin-top":
                            switch (array.length) {
                                case 1:
                                    setTargetCss("margin", `${input.val()} ${array[0]} 0px`);
                                    break;
                                case 2:
                                    setTargetCss("margin", `${input.val()} ${array[1]}`);
                                    break;
                                default:
                                    setTargetCss("margin", `${input.val()} ${array[1]} ${array[2]}`);
                                    break;
                            }
                            break;
                        case "box-margin-bottom":
                            switch (array.length) {
                                case 1:
                                    setTargetCss("margin", `0px ${array[0]} ${input.val()}`);
                                    break;
                                default:
                                    setTargetCss("margin", `${array[0]} ${array[1]} ${input.val()}`);
                                    break;
                            }
                            break;
                        default:
                            break;
                    }
                }
            }
            // 处理border四边的通用函数
            function _handleBorder(id, input) {
                // 配置样式
                if (id == "border-style") {
                    setTargetCss("border-style", input[0].value);
                    // 读出之前的边框宽度，如果没有则默认1px
                    if (target.attr("border-width")) {
                        border_width = target.attr("border-width");
                    } else {
                        border_width = "1px";
                    }
                    setTargetCss("border-width", border_width);
                }
                // 配置宽度
                else {
                    // 读出之前的边框样式，如果没有则默认实线框
                    if (target.attr("border-style")) {
                        border_style = target.attr("border-style");
                    } else {
                        border_style = "solid";
                    }
                    setTargetCss("border-style", border_style);
                    setTargetCss(id, input[0].value);
                }
            }

            function handleBorder(id, input) {
                switch (id) {
                    case "border-style":
                        break;
                    case "border-width":
                        _handleBorder(id, input);
                        break;
                    case "border-left":
                        _handleBorder(id, input);
                        break;
                    case "border-right":
                        _handleBorder(id, input);
                        break;
                    case "border-top":
                        _handleBorder(id, input);
                        break;
                    case "border-bottom":
                        _handleBorder(id, input);
                        break;
                    case "border-radius":
                        _handleBorder(id, input);
                        break;
                    default:
                        break;
                }
            }
        }
        // 类函数
        {

            function styleEditorComponents() {
                styleEditorComponents.prototype.valueClass = function (data) {
                    option = "";
                    array = data.list;
                    // 循环所有单选项
                    for (var i = 0; i < array.length; i++) {
                        option +=
                            `<button style="border: 1px solid #ddd;color:#000;" id="value_${data.id}${i}" name="${data.id}" data-id="${data.id}" type="button" class="layui-btn layui-btn-sm layui-btn-primary">${array[i]}</button>`
                    }
                    default_value =
                        `<input id="${data.id}-input" class="layui-input" style="text-align: center;border:none;width:60px;height:30px;display: inline;widows: 20px;" type="text" name="${data.id}-value" required lay-verify="required" autocomplete="off" value="${data.list[0]}">`;

                    divs =
                        `
                    <div id="${data.id}-box"><label id="${data.id}_title_label" class="layui-form-label">${data.desc} / ${data.id} : </label>
                    <div style="text-align:right;padding-top: 5px;margin-right:10px">
                        <button id="${data.id}_subtract" type="button" style="border:none;" class="layui-btn  layui-btn-sm  layui-btn-primary">
                        <i class="layui-icon">&#xe67e;</i>
                    </button>
                    ${default_value}
                    <button id="${data.id}_add" type="button" style="border:none;"  class="layui-btn  layui-btn-sm  layui-btn-primary">
                        <i class="layui-icon">&#xe624;</i>
                    </button> 
                    </div>
                    <div style="text-align:right;padding-top: 10px;margin-right:10px">${option} </div></div>
                `
                    $("#" + data.id).html(divs);
                    array = data.list;
                    // 循环写入点击事件
                    for (var i = 0; i < array.length; i++) {
                        $("#" + data.id + "-input").on("keydown", function (e) {
                            if (e.keyCode == 40) {
                                $("#" + data.id + "_subtract").click();
                            } else if (e.keyCode == 38) {
                                $("#" + data.id + "_add").click();
                            }
                        });

                        $("#value_" + data.id + i).click(function () {
                            _data_id = $(this).attr('data-id');
                            input = $('input[name="' + _data_id + '-value"]');
                            input.val($(this)[0].innerHTML);
                            _value = $(this)[0].innerHTML;
                            // 循环配置，不使用数值型
                            if (_value == "auto") {
                                setTargetCss(_data_id, "auto");

                            } else {
                                // 边框特殊处理
                                if (data.id.indexOf("border") > -1) {
                                    handleBorder(data.id, input);
                                }
                                // 位移特殊处理
                                else if (data.id.indexOf("box-margin") > -1) {
                                    handleBoxMargin(data.id, input);
                                } else {
                                    setTargetCss(data.id, _value);
                                }
                            }
                        })
                    }
                    //减号
                    $("#" + data.id + "_subtract").click(function () {
                        sub_deg = (sub_deg == 0 ? 180 : 0);
                        $(this).css("transform", "rotate(" + sub_deg + "deg)");

                        input = $('input[name="' + data.id + '-value"]');
                        // 添加默认值
                        if (input.val() == "") {
                            input.val(data.list[0]);
                        }
                        // %
                        if (input.val().charAt(input.val().length - 1) == "%") {
                            if ($('input[name="' + data.id + '-value"]').val()) {
                                _value = (parseInt($('input[name="' + data.id + '-value"]')
                                    .val()) - 1) + "%";
                            }
                        }
                        // px
                        else {
                            if ($('input[name="' + data.id + '-value"]').val()) {
                                _value = (parseInt($('input[name="' + data.id + '-value"]')
                                    .val()) - 1) + "px";
                            } else {
                                _value = "1px";
                            }
                        }
                        input.val(_value);

                        // 如果是border则需特殊处理
                        if (data.id.indexOf("border") > -1) {
                            handleBorder(data.id, input)
                        }
                        // 位移特殊处理
                        else if (data.id.indexOf("box-margin") > -1) {
                            handleBoxMargin(data.id, input);
                        } else {
                            setTargetCss(data.id, _value);
                        }
                    })
                    //加号
                    $("#" + data.id + "_add").click(function () {
                        add_deg = (add_deg == 0 ? 180 : 0);
                        $(this).css("transform", "rotate(" + add_deg + "deg)");

                        input = $('input[name="' + data.id + '-value"]');
                        // 添加默认值
                        if (input.val() == "") {
                            input.val(data.list[0]);
                        }
                        // %
                        if (input.val().charAt(input.val().length - 1) == "%") {
                            if ($('input[name="' + data.id + '-value"]').val()) {
                                _value = (parseInt($('input[name="' + data.id + '-value"]')
                                    .val()) + 1) + "%";
                            }
                        }
                        // px
                        else {
                            if ($('input[name="' + data.id + '-value"]').val()) {
                                _value = (parseInt($('input[name="' + data.id + '-value"]')
                                    .val()) + 1) + "px";
                            } else {
                                _value = "1px";
                            }
                        }
                        input.val(_value);

                        if (data.id.indexOf("border") > -1) {
                            handleBorder(data.id, input)
                        } // 位移特殊处理
                        else if (data.id.indexOf("box-margin") > -1) {
                            handleBoxMargin(data.id, input);
                        } else {
                            setTargetCss(data.id, _value);
                        }
                    })
                }

                styleEditorComponents.prototype.listClass = function (data) {
                    option = "";
                    array = data.list;
                    // 循环所有单选项
                    for (var i = 0; i < array.length; i++) {
                        option += `<option value="${array[i]}">${data.list[i]}</option>`
                    }

                    divs =
                        `
                            <div id="${data.id}-box"> <div style="text-align:right;">
                    <label id="${data.id}_title_label" class="layui-form-label">${data.desc} / ${data.id} : </label>
                    <div style="width: ${data.width ? data.width : 150}px;display: inline-block;margin-right:10px;text-align: left;">
                    <select lay-filter="${data.id}"><option value=""></option>${option}</select> 
                    </div><br>
                    <div></div>
`
                    $("#" + data.id).html(divs);

                    layui.form.on('select(' + data.id + ')', function (obj) {
                        setTargetCss(data.id, obj.value)
                    });
                }

                styleEditorComponents.prototype.colorClass = function (data) {
                    divs =
                        `<div id="${data.id}-box"><label id="${data.id}_title_label" class="layui-form-label">${data.desc} / ${data.id} : </label>
                            <br>
                            <div style="text-align: right;">
                        <div id="${data.id}-colorpicker" style="display:-webkit-inline-box;margin-top: -20px;margin-right: 70px;"></div>
                        <div conclick="$('#${data.id}-colorpicker').click();" id="${data.id}-text" style="margin-top: -48px;margin-right: 10px;">${data.defaultcolor ? data.defaultcolor : '#000000'}</div>
                    </div></div>
                    `
                    $("#" + data.id).html(divs);
                    // _dc_style_editor_color_picker_
                    layui.colorpicker.render({
                        elem: '#' + data.id + '-colorpicker',
                        color: data.defaultcolor ? data.defaultcolor : '#000000',
                        done: function (color) {
                            setTargetCss(data.id, color)
                            $('#' + data.id + '-text').html(color)
                        }
                    });
                }
            }
        }

        if (styleEditorComponents) {
            // 配置
            {

                (new styleEditorComponents()).valueClass({
                    id: "width",
                    desc: "宽",
                    list: [
                        "100%",
                        "80%",
                        "50%",
                        "300px",
                        "500px",
                    ],
                });

                (new styleEditorComponents()).valueClass({
                    id: "height",
                    desc: "高",
                    list: [
                        "100px",
                        "50px",
                        "auto",
                    ],
                });

                (new styleEditorComponents()).valueClass({
                    id: "box-margin-left",
                    desc: "位置",
                    list: [
                        "1px",
                        "center",
                        "10%",
                        "10px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "box-margin-top",
                    desc: "位置",
                    list: [
                        "1px",
                        "10%",
                        "10px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "box-margin-bottom",
                    desc: "位置",
                    list: [
                        "1px",
                        "10%",
                        "10px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "text-indent",
                    desc: "缩进",
                    list: [
                        "0px",
                        "36px",
                        "40px",
                        "46px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "letter-spacing",
                    desc: "字距",
                    list: [
                        "0px",
                        "1px",
                        "3px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "line-height",
                    desc: "行距",
                    list: [
                        "18px",
                        "20px",
                        "24px",
                    ],
                });

                new styleEditorComponents().listClass({
                    id: "font-family",
                    desc: "字体",
                    list: [
                        "PingFangSC-Regular",
                        "PingFangSC-Ultralight",
                        "PingFangSC-Light",
                        "PingFangSC-Thin",
                        "PingFangSC-Medium",
                        "PingFangSC-Semibold",
                        "'Microsoft Yahei'",
                        "'黑体'",
                        "'宋体'",
                        "arial",
                        "'arial black'",
                        "'comic sans ms'",
                        "'courier new'",
                        "georgia",
                        "helvetica",
                        "impact",
                        "'times new roman'",
                        "'trebuchet ms'",
                        "verdana",
                    ],
                });

                fontstyle = new styleEditorComponents();
                data = {
                    id: "font-style",
                    desc: "样式",
                    list: [
                        "italic",
                    ],
                }
                fontstyle.listClass(data);

                fontweight = new styleEditorComponents();
                data = {
                    id: "font-weight",
                    desc: "粗细",
                    list: [
                        "bold",
                        "bolder",
                        "lighter",
                    ],
                }
                fontweight.listClass(data);

                fontvariant = new styleEditorComponents();
                data = {
                    id: "font-variant",
                    desc: "变体",
                    list: [
                        "normal",
                        "small-caps",
                    ],
                }
                fontvariant.listClass(data);

                textalign = new styleEditorComponents();
                data = {
                    id: "text-align",
                    desc: "对齐",
                    list: [
                        "left",
                        "right",
                        "center",
                        "justify",
                    ],
                }
                textalign.listClass(data);

                textdecoration = new styleEditorComponents();
                data = {
                    id: "text-decoration",
                    desc: "修饰",
                    list: [
                        "underline",
                        "overline",
                        "underline overline",
                        "line through",
                        "blink",
                    ],
                }
                textdecoration.listClass(data);

                texttransform = new styleEditorComponents();
                data = {
                    id: "text-transform",
                    desc: "转换",
                    list: [
                        "lowercase",
                        "uppercase",
                        "capitalize",
                    ],
                }
                texttransform.listClass(data);

                new styleEditorComponents().listClass({
                    id: "border-style",
                    desc: "样式",
                    list: [
                        "solid",
                        "dashed",
                        "dotted",
                        "double",
                        "groove",
                        "inset",
                        "outset",
                        "ridge",
                    ],
                });

                new styleEditorComponents().valueClass({
                    id: "border-width",
                    desc: "宽度",
                    list: [
                        "0px",
                        "1px",
                        "3px",
                        "10px",
                        "20px",
                    ],
                });

                new styleEditorComponents().colorClass({
                    id: "border-color",
                    desc: "边框颜色",
                    list: [
                        "black",
                        "white",
                        "gray",
                        "#1296db",
                    ],
                });

                new styleEditorComponents().valueClass({
                    id: "border-left",
                    desc: "左边框",
                    list: [
                        "1px",
                        "2px",
                        "5px",
                    ],
                });
                new styleEditorComponents().valueClass({
                    id: "border-right",
                    desc: "右边框",
                    list: [
                        "1px",
                        "2px",
                        "5px",
                    ],
                });
                new styleEditorComponents().valueClass({
                    id: "border-top",
                    desc: "上边框",
                    list: [
                        "1px",
                        "2px",
                        "5px",
                    ],
                });
                new styleEditorComponents().valueClass({
                    id: "border-bottom",
                    desc: "下边框",
                    list: [
                        "1px",
                        "2px",
                        "5px",
                    ],
                });
                new styleEditorComponents().valueClass({
                    id: "border-radius",
                    desc: "圆角",
                    list: [
                        "3px",
                        "10px",
                        "20px",
                    ],
                });

                position = new styleEditorComponents();
                data = {
                    id: "position",
                    desc: "方式",
                    list: [
                        "static",
                        "relative",
                        "absolute",
                        "fixed",
                    ],
                }
                position.listClass(data);

                cursor = new styleEditorComponents();
                data = {
                    id: "cursor",
                    desc: "光标",
                    list: [
                        "crosshair",
                        "default",
                        "pointer",
                        "move",
                        "text",
                        "wait",
                        "help",
                        "n-resize",
                        "s-resize",
                        "w-resize",
                        "e-resize",
                        "ne-resize",
                        "nw-resize",
                        "se-resize",
                        "sw-resize",
                    ],
                }
                cursor.listClass(data);

                visibility = new styleEditorComponents();
                data = {
                    id: "visibility",
                    desc: "可见性",
                    list: [
                        "visible",
                        "hidden",
                    ],
                }
                visibility.listClass(data);

                overflow = new styleEditorComponents();
                data = {
                    id: "overflow",
                    desc: "溢出",
                    list: [
                        "visible",
                        "hidden",
                        "scroll",
                        "auto",
                    ],
                }
                overflow.listClass(data);

                float = new styleEditorComponents();
                data = {
                    id: "float",
                    desc: "溢出",
                    list: [
                        "left",
                        "right",
                        "none",
                    ],
                }
                float.listClass(data);

                backgroundrepeat = new styleEditorComponents();
                data = {
                    id: "background-repeat",
                    desc: "平铺模式",
                    list: [
                        "repeat",
                        "repeat-x",
                        "repeat-y",
                        "no-repeat",
                    ],
                }
                backgroundrepeat.listClass(data);

                backgroundposition = new styleEditorComponents();
                data = {
                    id: "background-position",
                    desc: "背景定位",
                    list: [
                        "left",
                        "right",
                        "top",
                        "left top",
                        "right bottom",
                        "50% 50%",
                    ],
                }
                backgroundposition.listClass(data);

                backgroundattachment = new styleEditorComponents();
                data = {
                    id: "background-attachment",
                    desc: "背景固定",
                    list: [
                        "fixed",
                        "scroll",
                    ],
                }
                backgroundattachment.listClass(data);

                (new styleEditorComponents()).valueClass({
                    id: "font-size",
                    desc: "大小",
                    list: [
                        "14px",
                        "16px",
                        "20px",
                        "30px",
                    ],
                });


                (new styleEditorComponents()).valueClass({
                    id: "padding",
                    desc: "内边距",
                    list: [
                        "0px",
                        "5px",
                        "10px",
                    ],
                });


                (new styleEditorComponents()).valueClass({
                    id: "margin",
                    desc: "外边距",
                    list: [
                        "0px",
                        "5px",
                        "10px",
                    ],
                });

                (new styleEditorComponents()).valueClass({
                    id: "position-top",
                    desc: "顶",
                    list: [
                        "0px",
                        "5px",
                        "10px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "position-bottom",
                    desc: "底",
                    list: [
                        "0px",
                        "5px",
                        "10px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "position-left",
                    desc: "左",
                    list: [
                        "0px",
                        "5px",
                        "10px",
                    ],
                });
                (new styleEditorComponents()).valueClass({
                    id: "position-right",
                    desc: "右",
                    list: [
                        "0px",
                        "5px",
                        "10px",
                    ],
                });

                (new styleEditorComponents()).colorClass({
                    id: "background-color",
                    desc: "背景颜色",
                    defaultcolor: "#ffffff",
                    list: [
                        "#000",
                        "#fff",
                    ],
                });
                (new styleEditorComponents()).colorClass({
                    id: "color",
                    desc: "颜色",
                    list: [
                        "#000",
                        "#fff",
                    ],
                });
                layui.form.render();
            }
        }

        // 标题栏监听
        {
            $('.layui-icon-fonts-strong').click(function () {
                if ($(this).data("on") == 1) {
                    $(this).data("on", 0);
                    $(this).removeClass('icon-frame');
                    setTargetCss("font-weight", "");
                } else {
                    $(this).data("on", 1);
                    $(this).addClass('icon-frame');
                    setTargetCss("font-weight", "bold");
                }
            })
            $('.layui-icon-align-left').click(function () {
                if ($(this).data("on") == 1) {
                    return;
                    $(this).data("on", 0);
                    $(this).removeClass('icon-frame');
                    setTargetCss("text-align", "")
                } else {
                    $(this).data("on", 1);
                    $(this).addClass('icon-frame');
                    setTargetCss("text-align", "left")
                    $(".layui-icon-align-right").data("on", 0);
                    $(".layui-icon-align-center").data("on", 0);
                    $('.layui-icon-align-right').removeClass('icon-frame')
                    $('.layui-icon-align-center').removeClass('icon-frame')
                }
            })
            $('.layui-icon-align-right').click(function () {
                if ($(this).data("on") == 1) {
                    $(this).data("on", 0);
                    $(this).removeClass('icon-frame');
                    setTargetCss("text-align", "")
                    $(".layui-icon-align-left").data("on", 1);
                    $(".layui-icon-align-left").addClass('icon-frame');
                } else {
                    $(this).data("on", 1);
                    $(this).addClass('icon-frame');
                    setTargetCss("text-align", "right")
                    $(".layui-icon-align-left").data("on", 0);
                    $(".layui-icon-align-center").data("on", 0);
                    $('.layui-icon-align-left').removeClass('icon-frame')
                    $('.layui-icon-align-center').removeClass('icon-frame')
                }
            })
            $('.layui-icon-align-center').click(function () {
                if ($(this).data("on") == 1) {
                    $(this).data("on", 0);
                    $(this).removeClass('icon-frame');
                    setTargetCss("text-align", "")
                    $(".layui-icon-align-left").data("on", 1);
                    $(".layui-icon-align-left").addClass('icon-frame');
                } else {
                    $(this).data("on", 1);
                    $(this).addClass('icon-frame');
                    setTargetCss("text-align", "center")
                    $(".layui-icon-align-left").data("on", 0);
                    $(".layui-icon-align-right").data("on", 0);
                    $('.layui-icon-align-left').removeClass('icon-frame')
                    $('.layui-icon-align-right').removeClass('icon-frame')
                }
            })
            $('.layui-icon-fonts-u').click(function () {
                if ($(this).data("on") == 1) {
                    $(this).data("on", 0);
                    $(this).removeClass('icon-frame');
                    setTargetCss("text-decoration", "")
                } else {
                    $(this).data("on", 1);
                    $(this).addClass('icon-frame');
                    setTargetCss("text-decoration", "underline")
                }
            })
            $('.layui-icon-fonts-i').click(function () {
                if ($(this).data("on") == 1) {
                    $(this).data("on", 0);
                    $(this).removeClass('icon-frame');
                    setTargetCss("font-style", "")
                } else {
                    $(this).data("on", 1);
                    $(this).addClass('icon-frame');
                    setTargetCss("font-style", "italic")
                }
            })
            $('.layui-icon-refresh').click(function () {
                if ($(this).data("on") == 180) {
                    $(this).data("on", 0);
                } else {
                    $(this).data("on", 180);
                }
                // 清空之前的选中状态
                $('.layui-icon-fonts-strong').data("on", 0);
                $('.layui-icon-align-left').data("on", 0);
                $('.layui-icon-align-right').data("on", 0);
                $('.layui-icon-align-center').data("on", 0);
                $('.layui-icon-fonts-u').data("on", 0);
                $('.layui-icon-fonts-i').data("on", 0);

                $('.layui-icon-fonts-strong').removeClass('icon-frame')
                $('.layui-icon-align-left').removeClass('icon-frame')
                $('.layui-icon-align-right').removeClass('icon-frame')
                $('.layui-icon-align-center').removeClass('icon-frame')
                $('.layui-icon-fonts-u').removeClass('icon-frame')
                $('.layui-icon-fonts-i').removeClass('icon-frame')

                $(this).css("transform", "rotate(" + $(this).data("on") + "deg)");
                target.attr("style", _dc_style_editor_target_origin_style_ == null ? "" :
                    _dc_style_editor_target_origin_style_);
            })
            $('.layui-icon-up').click(function () {
                if ($(this).data("on") == 180) {
                    $(this).data("on", 0);
                    // $("#_dc_style_editor_").css("height", "50%");
                    $("#_dc_style_editor_").animate({
                        height: "50%"
                    }, 200, 'linear');
                    $('.layui-icon-up').show();
                    $('.layui-icon-down').show();
                } else {
                    $(this).data("on", 180);
                    $('.layui-icon-down').hide();
                    $("#_dc_style_editor_").animate({
                        height: "100%"
                    }, 200, 'linear');
                }
                $(this).css("transform", "rotate(" + $(this).data("on") + "deg)");
            })
            $('.layui-icon-down').click(function () {
                if ($(this).data("on") == 180) {
                    $(this).data("on", 0);
                    $('.layui-icon-up').show();
                    $("#_dc_style_editor_").animate({
                        height: "50%"
                    }, 200, 'linear');
                } else {
                    $(this).data("on", 180);
                    $('.layui-icon-up').hide();
                    $("#_dc_style_editor_").animate({
                        height: "44px"
                    }, 200, 'linear');
                }
                $(this).css("transform", "rotate(" + $(this).data("on") + "deg)");
            })
            $('.layui-icon-close').click(function () {
                $("#_dc_style_editor_").css("display", "none");
                _dc_style_editor_cb_({
                    res: 1,
                    selector: target.selector,
                    style: target.attr('style')
                });

                // 保存历史样式
                url = "https://api.dcdev.net/v1.0.1/system/store_style.php";
                data = {
                    "content": target.attr('style')
                };
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: url,
                    data: {
                        params: JSON.stringify(data)
                    },
                    success: function (res) {}
                })
            })
        }
        //背景图片
        function changeBgImage() {
            layui.layer.confirm('确定使用新的背景图片?', {
                icon: 3,
                title: '提示',
                offset: '40%'
            }, function (index) {
                layui.layer.close(index);
                layer.msg('应用成功.', {
                    icon: 1
                })
                var _value = $('input[name="background-image"]').val();
                setTargetCss("background-image", "url(" + _value + ")");
            });
        }

        // 设置css并显示最新css样式
        function setTargetCss(attr, value) {
            target.css(attr, value);
            // 获取最新的style并显示
            if (target.attr('style')) {
                $('#css').html(target.attr('style').replace(/; /g, ';\n'));
            }
        }

        // 桌面端浏览器操作
        {
            browser_info = {};
            browser_info.user_agent = navigator.userAgent.toLowerCase();
            browser_info.is_wechat = (browser_info.user_agent.indexOf('micromessenger') != -1) ? true :
                false;
            browser_info.is_mobile = (navigator.userAgent.match(
                /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            )) ? true : false


            // 桌面端 
            if (browser_info.is_desktop) {
                $(".layui-icon-up").hide();
                $(".layui-icon-down").hide();
                $('#function_area').css('margin-top', '-20px')
                $("#_dc_style_editor_body_").css({
                    "top": "0px",
                    "width": "400px",
                    // "right": "0",
                    // "position": "absolute",
                    // "margin-top": "40px"
                });
                $('.layui-icon-refresh').css('padding-left', '0')
                $('#titletools').css('width', '400px');
                $('#titletools').css('right', '0');
                // $('#titletools').css('position', 'absolute');
                // $('#_dc_style_editor_').css('position', 'absolute')
                // $('#_dc_style_editor_').css('height', '100%')
                $("#_dc_style_editor_tool_bar_area_").mousedown(function (e) { //e鼠标事件 
                    var offset = $("#_dc_style_editor_").position(); //DIV在页面的位置  使用position定位
                    //var offset = $(this).offset();//DIV在页面的位置  一般使用offset
                    var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离 
                    var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离 
                    var thas = $("#_dc_style_editor_");
                    $("body").on("mousemove", function (
                        ev
                    ) { //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件  
                        var _x = ev.pageX - x; //获得X轴方向移动的值 
                        var _y = ev.pageY - y; //获得Y轴方向移动的值 
                        thas.animate({
                            left: _x + "px",
                            top: _y + "px"
                        }, 10);
                    });
                });
                $("#_dc_style_editor_tool_bar_area_").mouseup(function () {
                    $("body").off("mousemove");
                });

                $(".layui-input").on("keydown", function (e) {
                    if (e.keyCode == 38) {
                        //to-do when click Enter Key
                        console.log(38)
                    } else if (e.keyCode == 40) {
                        console.log(40)
                    }
                });
            }
            // 移动端
            else {
                $("#_dc_style_editor_body_").css({
                    "top": "0px",
                    "height": "100%",
                });
            }
        }
    });
</script>